
function MoveNavboxOnDrag (datum)
{

    var dav                   = $('dnavbox');
    var PreviewImage          = $('impreview');
    var ImageElement          = $('imageactual');
    var ImageWorkspace        = $('imagewindow');
    var SidebarPane           = $('mysidebar'); 

    if (!ImageWorkspace) return report ('no ImageWorkspace');
    if (!ImageElement) return report ('no ImageElement');
    if (!SidebarPane) return report ('no SidebarPane');

    var picpos = getPosition (PreviewImage);
    var navpos = datum.position;

    var SizeofWorkspace          = { w:ImageWorkspace.offsetWidth,h:ImageWorkspace.offsetHeight };
    var SizeofImage              = { w:ImageElement.offsetWidth,h:ImageElement.offsetHeight };
    var SizeofPreviewImage       = { w:PreviewImage.offsetWidth, h:PreviewImage.offsetHeight };
    var ScrollofSidebar          = { x:SidebarPane.scrollLeft,y:SidebarPane.scrollTop };
    var LocationofPreviewImage   = { x:picpos.x-ScrollofSidebar.x,
                                     y:picpos.y-ScrollofSidebar.y,
                                     x2:PreviewImage.offsetWidth+picpos.x-ScrollofSidebar.x,y2:PreviewImage.offsetHeight+picpos.y-ScrollofSidebar.y };
    var LocationofNavigationPane = { x2:dav.offsetWidth+datum.position.x,y2:dav.offsetHeight+datum.position.y };

    var image_ratio  = {x:SizeofPreviewImage.w/SizeofImage.w,y:SizeofPreviewImage.h/SizeofImage.h }
    var actual_delta = {x:navpos.x - LocationofPreviewImage.x,y:navpos.y - LocationofPreviewImage.y}
    var scroll_pos   = {x:actual_delta.x / image_ratio.x,y:actual_delta.y / image_ratio.y }

    var ToofarLeft  = datum.position.x < LocationofPreviewImage.x;
    var ToofarRight = LocationofNavigationPane.x2 > LocationofPreviewImage.x2;
    var ToofarUp    = datum.position.y < LocationofPreviewImage.y ;// + ScrollofSidebar.y;
    var ToofarDown  = LocationofNavigationPane.y2 > LocationofPreviewImage.y2 ;//+ ScrollofSidebar.y;


    function InvokeXCoord()
    {
        dav.style.left   = datum.position.x; 
        ImageWorkspace.scrollLeft = scroll_pos.x;
    }

    function InvokeYCoord()
    {
        dav.style.top  = datum.position.y;
        ImageWorkspace.scrollTop  = scroll_pos.y;
    }
    
    if (!(ToofarLeft || ToofarRight)) InvokeXCoord();
    if (!(ToofarUp || ToofarDown)) InvokeYCoord(); 
}

function MoveNavboxOnImageScroll ()
{
    var PreviewImage          = $('impreview');
    var ImageElement          = $('imageactual');
    var ImageWorkspace        = $('imagewindow');
    var SidebarPane           = $('mysidebar'); 

    if (!ImageWorkspace) return report ('no ImageWorkspace');
    if (!ImageElement) return report ('no ImageElement');
    if (!PreviewImage) return report ('no PreviewImage');

    var pos = getPosition (PreviewImage);

    var SizeofWorkspace        = { w:ImageWorkspace.offsetWidth,h:ImageWorkspace.offsetHeight };
    var ScrollofWorkspace      = { x:ImageWorkspace.scrollLeft,y:ImageWorkspace.scrollTop };
    var ScrollofSidebar        = { x:SidebarPane.scrollLeft,y:SidebarPane.scrollTop };
    var SizeofImage            = { w:ImageElement.offsetWidth,h:ImageElement.offsetHeight };
    var SizeofPreviewImage     = { w:PreviewImage.offsetWidth,h:PreviewImage.offsetHeight };    


    var Workspace2ImageRatio   = { x:SizeofWorkspace.w/SizeofImage.w,y:SizeofWorkspace.h/SizeofImage.h }
    var Preview2ImageRatio     = { x:SizeofPreviewImage.w/SizeofImage.w,y:SizeofPreviewImage.h/SizeofImage.h }

    var SizeofNavigationPane   = { w:SizeofPreviewImage.w*Workspace2ImageRatio.x,h:SizeofPreviewImage.h*Workspace2ImageRatio.y }    
    var ScrollofNavigationPane = { w:ScrollofWorkspace.x*Preview2ImageRatio.x,h:ScrollofWorkspace.y*Preview2ImageRatio.y }    

    this.style.width  = '(0)px'.format(Math.min(SizeofNavigationPane.w, SizeofPreviewImage.w) - 4)
    this.style.height = '(0)px'.format(Math.min(SizeofNavigationPane.h, SizeofPreviewImage.h) - 4)
    this.style.left   = '(0)px'.format(pos.x + ScrollofNavigationPane.w - ScrollofSidebar.x)
    this.style.top    = '(0)px'.format(pos.y + ScrollofNavigationPane.h - ScrollofSidebar.y)    
}

function ConnectMouseListeners()
{
    window.mouseDownListener.invoke = function (datum)
    {
        Controller.dragtarget = datum.id;
        Controller.offset     = datum.offset;
        Controller.scrolling  = true; 
        Tools.invoke ( GetMouseData (datum) );
    }
    window.mouseMoveListener.invoke = function (datum)
    {  

        if (Controller.dragtarget=='imagewindow' && datum.name == 'mousemove')
        {  
            Tools.invoke ( GetMouseData (datum) );
            return;
        }
        else if (Controller.scrolling && datum.name == 'mousemove')
        {

            MoveNavboxOnDrag (datum);
            return; 
        }

    }
    window.mouseUpListener.invoke = function (datum)
    { 
        Controller.scrolling = false;
        Tools.apply ( GetMouseData (datum) );
    }
}

function AttachThumbnailNavbox ()
{      
    var ImageWindow    = $('imagewindow');
    var NavigationPane = $('dnavbox');
    NavigationPane.invoke = MoveNavboxOnImageScroll;

    ConnectMouseListeners();
 
    makeDraggable(NavigationPane);
    makeDraggable(ImageWindow);

    Controller.scroller.subscribe (NavigationPane);
    Controller.scroller.invoke ();
}

function AttachThumbnailWindow ()
{ 
    AttachThumbnailNavbox ();
    $('izoom').invoke = function ()
    {
        if (Controller.info && Controller.info.z)
            this.value = Controller.info.z * 100
    }
    Controller.scroller.subscribe ($('izoom'));
    $('imagewindow').onscroll = function ()
    {  
        Controller.scroller.invoke ();
    }
    var sb  = $('mysidebar'); 
    sb.invoke = function ()
    { 
        var pos =  getPosition(this); 
        this.style.height = '(0)px'.format(window_h() - pos.y - 30);
    }
    sb.onscroll = function ()
    {  
        Controller.scroller.invoke ();
    }
    Controller.resizer.subscribe (sb);
    Controller.resizer.invoke ();
    Controller.scroller.invoke ();
}

function Size2Window(obj)
{
    obj.invoke = function ()
    {
        var pos =  getPosition(this);
        this.style.width  = '(0)px'.format(window_w() - pos.x - 30);
        this.style.height = '(0)px'.format(window_h() - pos.y - 30);
    }
    Controller.resizer.subscribe (obj);
    Controller.resizer.invoke ();
}

function AttachHomescreenWindow ()
{ 
    var wdw = $('imagelist');
    Size2Window (wdw);
}

function AttachImageWindow ()
{ 
    var wdw = $('imagewindow');
    var sb  = $('mysidebar'); 
    if (!wdw) return false;
    if (!sb) return false;

    Size2Window (wdw);
   
    sb.invoke = function ()
    { 
        var pos =  getPosition(this); 
        this.style.height = '(0)px'.format(window_h() - pos.y - 30);
    }
    Controller.resizer.subscribe (sb);

    Controller.resizer.invoke ();
    AttachLogWindow ();
}

function GetMouseData (datum)
{
    var ws  = $('imageactual');
    var wdw = $('imagewindow');

    var actpos = getPosition (ws);
    var data = { abs: { x:datum.position.x + mouseDatum.offset.x - actpos.x,
                        y:datum.position.y + mouseDatum.offset.y - actpos.y }, 
                 rel : {x:0,y:0 } }

    data.rel.x = (data.abs.x + wdw.scrollLeft) / Controller.info.z;
    data.rel.y = (data.abs.y + wdw.scrollTop) / Controller.info.z;
    return {name:datum.name, x:data.rel.x, y:data.rel.y , info : data};
}